﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>00: Dispatcher Test</title>
	<style type="text/css">
		body, html {
			width: 100%;
			height: 100%;
			margin: 0;
			overflow: hidden;
		}
	</style>
	<script src="../bootloader.js" type="text/javascript"></script>
	<!-- -->
	<script type="text/javascript">
		go = function() {
			// A container and control with mouse-over effects
			mousey = {
				styles: { border: 1 },
				controls: [
					{content: "Hi", w: 32, h: 32, styles: {border: 1, bgColor: "#FFF"},
						mouseoverHandler: function(e){
							kit.anim(this.node, {"backgroundColor": {start:"#FFF", end: "#8F8"}});
						},
						mouseoutHandler: function(e){
							kit.anim(this.node, {"backgroundColor": {start:"#8F8", end: "#FFF"}});
						}
					},
					{content: "Ho", l: 48, styles: {border: 1}}
				],
				mouseoverHandler: function(e){
					kit.anim(this.node, {"backgroundColor": {start:"#FFF", end: "#FF0"}});
				},
				mouseoutHandler: function(e){
					kit.anim(this.node, {"backgroundColor": {start:"#FF0", end: "#FFF"}});
				}
			};
			// create a bunch of them
			var controls = [];
			for(var j=0; j<5; j++) {
				for (var i=0; i<10; i++) {
					controls.push(kit.mixin({}, mousey, {l:i*100, t:j*100, w:80, h:80}));
				}
			}
			// setup a view (and a dispatcher)
			view = new opus.View({
				name: "view",
				styles: { padding: 32 },
				controls: controls
			});
		}
	</script>
</head>
<body onload="go()" onresize="view.resize()">
</body>
</html>
